<template>
  <div class="ask-detail">
    <div style="margin-bottom: .2rem">
      <group>
        <cell title="患者">{{detail.patientUserCoreDTO.trueName}}</cell>
        <cell title="患者地区">{{detail.patientUserCoreDTO.address}}</cell>
        <cell title="医院首诊时间">{{detail.firstInquiryTime}}</cell>
      </group>
    </div>
    <div style="background: #fff;">
      <div class="p40">
        <div class="record-cell">主诉</div>
      </div>
      <div class="main-symptom">
        {{detail.description}}
      </div>
    </div>
    <div style="background: #fff;">
      <div class="p40">
        <div class="record-cell">上传图片</div>
      </div>
      <div class="main-case">
        <div class="flex-box-align case-wrapper">
          <div class="flex">
            <p>病例</p>
            <img class="previewer-demo-img" :src="detail.casePhoto.fileUrl" alt="" @click="show(0)">
            <div v-transfer-dom>
              <previewer :list="list" ref="previewer" :options="options"></previewer>
            </div>
          </div>
          <div class="flex">
            <p>检查报告</p>
            <img class="previewer-demo-img" :src="detail.checkResultPhoto.fileUrl" alt="" @click="show(1)">
          </div>
        </div>
        <div style="color: #999;font-size: .3rem;">看诊时间：{{detail.secondInquiryTime}}</div>
      </div>
    </div>
    <div style="background: #fff;">
      <div class="p40">
        <div class="record-cell">医生意见</div>
      </div>
      <div class="advice-area">
        <textarea type="text" v-model="doctorOpinion" placeholder="输入医生意见" @input="handleChange" maxlength="500"></textarea>
      </div>
    </div>
    <div class="btn-save" @click="handleClickSave">保存</div>
  </div>
</template>
<script>
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  import {Group, Cell, Previewer, TransferDom} from "vux";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    directives: {
      TransferDom
    },
    data() {
      return {
        doctorOpinion: "",
        detail: {},
        list: [],
        options: {
          getThumbBoundsFn (index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect()
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      }
    },

    components: {
      Group, Cell, Previewer

    },
    mounted() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        common.requestAjax(CONSTANT.URL.PATIENT.INQUIRYDETAIL, {}, {id: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail = res.data.bussData;
            this.doctorOpinion = this.detail.doctorOpinion
            this.list = [
              {src: this.detail.casePhoto.fileUrl},
              {src: this.detail.checkResultPhoto.fileUrl}
            ]
          }
        })
      },
      handleClickSave() {
        let url = CONSTANT.URL.PATIENT.INQUIRYDOCTOROPINION;
        let params = {
          doctorOpinion: this.doctorOpinion,
          id: parseUrlParams("id")
        }
        common.requestAjax(url, JSON.stringify(params), {}, (res) => {
          if (res.status == 200) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      show (index) {
        this.$refs.previewer.show(index)
      },
      handleChange(val) {
      }
    }
  };
</script>
<style lang="less">
  .ask-detail {
    height: 100%;
    background-color: #f4f4f4;
    font-size: .34rem;
    .weui-cells {
      margin-top: 0!important;
    }
    .main-symptom {
      background-color: #f4f4f4;
      margin: 0 .3rem;
      height: 2.4rem;
      padding: .2rem;
      font-size: .3rem;
      color: #666;
    }
    .main-case {
      padding: 0 .3rem;
      .case-wrapper {
        margin-bottom: .2rem;
        div {
          font-size: .32rem;
          &:first-child {
            margin-right: .2rem;
          }
          p {
            margin-bottom: .29rem;
          }
          img {
            width: 3.35rem;
            height: 2.5rem;
            vertical-align: middle;
          }
        }
      }
    }
    .advice-area {
      padding: 0 .3rem;
      textarea {
        font-size: .3rem;
        border: none;
        width: 6.5rem;
        height: 2.4rem;
        padding: .2rem;
        background-color: #f4f4f4;
        &:focus {
          border: none;
          outline: 0;
        }
      }
    }
    .btn-save {
      margin-top: .53rem;
      margin-bottom: .49rem;
      width: 6.9rem;
      margin-left: .3rem;
      background-color: #0063AE;
      height: .88rem;
      line-height: .88rem;
      text-align: center;
      color: #fff;
      font-size: .36rem;
      border-radius: .1rem;
      &:active {
        opacity: .7;
      }
    }
  }

  .record-cell {
    border-left: .04rem solid #0063AE;
    padding-left: .14rem;
    position: relative;
  }

  .p40 {
    padding: .4rem .3rem .29rem .3rem;
  }
</style>
